<template>
  <div class="box8">
    <div class="top">
      <van-nav-bar title="商品搜索" left-arrow @click-left="$router.back()" />
    </div>
    <div>
      <van-search
        ref="search"
        show-action
        placeholder="请输入搜索关键词"
        focus
        shape="square"
        v-model="sercuvd"
      >
        <template #action>
          <div @click="onSearch(sercuvd)" class="shos">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="sss" v-if="lisxr.length>0">
      <div class="word">最近搜索</div>
      <van-icon name="delete-o" @click="rexc" />
    </div>
    <div class="shoj1">
      <div
        class="shoj"
        v-for="(item,index) in lisxr"
        :key="index"
        @click="onSearch(item)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import { getHistory, setHistory } from '@/utils/storesx'
export default {
  name: 'ComFerio',
  data () {
    return {
      sercuvd: '',
      lisxr: getHistory()
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.search.querySelector('input').focus()
    })
    console.log(this.lisxr)
  },
  methods: {
    rexc () {
      this.lisxr = []
      this.onSearch = []
    },
    onSearch (key) {
      const index = this.lisxr.indexOf(key)
      if (index !== -1) {
        this.lisxr.splice(index, 1)
      }
      this.lisxr.unshift(key)
      setHistory(this.lisxr)
      this.$router.push(`/meixs?sercuvd=${key}`)
    }
  },
  created () {}
}
</script>

<style lang="less">
.box8 {
  .shos {
    background-color: red;
    width: 80px;
    text-align: center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    color: white;
  }
  .sss {
    display: flex;
    justify-content: space-between;
    padding: 20px;
  }
  .shoj1 {
    display: flex;
    padding: 10px;
    width: 100%;
    flex-wrap: wrap;
    .shoj {
      background-color: #fefefe;
      width: 105px;
      border: 1px solid violet;
      text-align: center;
      border-radius: 25px;
      margin: 5px 5px;
    }
  }
}
</style>
